<template>
    <div class="box2" style="width:100%; height: 100%;">
      <i class="st_k1"></i>
      <i class="st_k2"></i>
      <i class="st_k3"></i>
      <i class="st_k4"></i>
      <i class="jiantou jiantou_a"></i>
      <i class="moves1a i_move_t"></i>
      <i class="moves1b i_move_t1"></i>
      <p class="st_tit">{{title}}<span class="time" style="left: 138px;">{{subTitle}}</span></p>
      <div class="st_main" style="width: 100%;"><slot name="center"></slot></div>
    </div>
</template>

<script>
export default {
    props: {
      title: {
        type: String,
        default: '边框标题'
      },
      subTitle: {
        type: String,
        default: '二级标题'
      }
    },
    data() {
      return {

      }
    }
}
</script>

<style lang="less" scoped>
.box2 { background: url(~@/assets/images/borderBox/box2/bg_item.png) repeat; min-height: 100px; min-width: 200px; display: inline-block; vertical-align: top; margin: 0px; position: relative;}
.box2 i { display: block; position: absolute;}
.box2 i.st_k1 { width: calc( 100% + 39px ); height: calc( 100% + 54px ); background: url(~@/assets/images/borderBox/box2/st_k1.png) no-repeat left top; left: -39px; top: -53px;}
.box2 i.st_k2 { width: 21px; height: calc( 100% + 54px ); background: url(~@/assets/images/borderBox/box2/st_k2.png) no-repeat center 30px; right: -21px; top: -53px;}
.box2 i.st_k3 { width: calc( 100% + 56px ); height: 29px; background: url(~@/assets/images/borderBox/box2/st_k3.png) no-repeat 18px center; left: -41px; bottom: -29px;}
.box2 i.st_k4 { width: 22px; height: 22px; background: url(~@/assets/images/borderBox/box2/st_k4.png) no-repeat left top; right: -20px; bottom: -21px;}
.box2.st_a i.st_k1 { width: calc( 100% + 39px ); height: calc( 100% + 54px ); background: url(~@/assets/images/borderBox/box2/st_k1_1.png) no-repeat left top; left: -39px; top: -53px;}
.box2.st_b i.st_k1 { width: calc( 100% + 39px ); height: calc( 100% + 54px ); background: url(~@/assets/images/borderBox/box2/st_k1_2.png) no-repeat left top; left: -39px; top: -53px;}
.box2 .st_main { width: 100%; position: relative; box-sizing: border-box; z-index: 10;}
.box2 .st_tit{color: #fff; font-size: 16px; position: absolute; top: -48px;}
.box2 .st_tit .time{color: #fff; font-size: 13px;background: url(~@/assets/images/borderBox/box2/bg_title_time.png) no-repeat left center; display: inline-block; position: absolute; left: 174px; padding-left: 28px; top: 4px; width: 180px; height:21px; line-height: 21px;}
.box2 .st_title { position: absolute; top: -84px; left: -35px; height: 46px; line-height: 46px; font-size: 28px; color: #f4f3ef;}
.box2 .st_title img { vertical-align: top;}
.box2 .st_title em { text-indent: 1em; display: block; height: 46px; line-height: 46px; font-style: normal;}

.moves1a { animation: 2s linear 0s normal infinite running moves1a;}
.moves1b { animation: 2s linear 0s normal infinite running moves1b;}
.i_move_t{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box2/sy_xl_bg-light.png) no-repeat center center; top: -30px;}
.i_move_t1{width: 90px; height: 18px; background: url(~@/assets/images/borderBox/box2/sy_xl_bg-light.png) no-repeat center center; top: -30px; right: -65px; transform: rotate(90deg);}

@keyframes moves1a {
  0% {
    left: 0%;
    opacity: 0.4;
  }
  30% {
    left: 30%;
    opacity: 1;
  }
  60% {
    left: 60%;
    opacity: 0.6;
  }
  100% {
    left: calc(100% - 90px);
    opacity: 0;
  }
}
@keyframes moves1b {
  0% {
    top: 0%;
    opacity: 0.4;
  }
  30% {
    top: 30%;
    opacity: 1;
  }
  60% {
    top: 60%;
    opacity: 0.6;
  }
  100% {
    top: calc(100% - 30px);
    opacity: 0;
  }
}
</style>